const SHAPES = [
    [[1, 1, 1, 1]], // I形
    [[1, 1], [1, 1]], // O形
    [[0, 1, 0], [1, 1, 1]], // T形
    [[1, 0, 0], [1, 1, 1]], // L形
    [[1, 1, 0], [0, 1, 1]]  // Z形
  ];
  
  Page({
    data: {
      ctx: null,
      grid: [],
      currentBlock: null,
      score: 0,
      interval: null
    },
  
    onLoad: function () {
      const ctx = wx.createCanvasContext('gameCanvas');
      this.setData({ ctx });
  
      this.initGrid();
      this.spawnBlock();
      this.draw();
  
      const interval = setInterval(() => {
        this.moveDown();
      }, 1000);
      this.setData({ interval });
    },
  
    onUnload: function () {
      clearInterval(this.data.interval);
    },
  
    initGrid: function () {
      const grid = Array.from({ length: 20 }, () => Array(10).fill(0));
      this.setData({ grid });
    },
  
    spawnBlock: function () {
      const randomIndex = Math.floor(Math.random() * SHAPES.length);
      this.setData({
        currentBlock: { x: 4, y: 0, shape: SHAPES[randomIndex] }
      });
    },
  
    draw: function () {
      const { ctx, grid, currentBlock } = this.data;
      ctx.clearRect(0, 0, 300, 600);
  
      // 绘制透明网格参考线
      this.drawGrid(ctx);
  
      grid.forEach((row, y) => {
        row.forEach((cell, x) => {
          if (cell) {
            this.drawBlock(ctx, x, y, 'blue');
          }
        });
      });
  
      if (currentBlock) {
        currentBlock.shape.forEach((row, dy) => {
          row.forEach((cell, dx) => {
            if (cell) {
              this.drawBlock(ctx, currentBlock.x + dx, currentBlock.y + dy, 'red');
            }
          });
        });
      }
  
      ctx.draw();
    },
  
    drawGrid: function (ctx) {
      ctx.setStrokeStyle('rgba(0, 0, 0, 0.1)'); // 透明黑色
      for (let i = 0; i <= 300; i += 30) {
        ctx.beginPath();
        ctx.moveTo(i, 0);
        ctx.lineTo(i, 600);
        ctx.stroke();
      }
      for (let j = 0; j <= 600; j += 30) {
        ctx.beginPath();
        ctx.moveTo(0, j);
        ctx.lineTo(300, j);
        ctx.stroke();
      }
    },
  
    drawBlock: function (ctx, x, y, color) {
      ctx.setFillStyle(color);
      ctx.fillRect(x * 30, y * 30, 30, 30);
      ctx.setStrokeStyle('white');
      ctx.strokeRect(x * 30, y * 30, 30, 30); // 给每个小方块加上白色边框
    },
  
    moveDown: function () {
      const { currentBlock } = this.data;
      if (this.checkCollision(currentBlock.x, currentBlock.y + 1)) {
        this.fixBlock();
        this.spawnBlock();
      } else {
        this.setData({
          'currentBlock.y': currentBlock.y + 1
        });
        this.draw();
      }
    },
  
    left: function () {
      const { currentBlock } = this.data;
      if (!this.checkCollision(currentBlock.x - 1, currentBlock.y)) {
        this.setData({ 'currentBlock.x': currentBlock.x - 1 });
        this.draw();
      }
    },
  
    right: function () {
      const { currentBlock } = this.data;
      if (!this.checkCollision(currentBlock.x + 1, currentBlock.y)) {
        this.setData({ 'currentBlock.x': currentBlock.x + 1 });
        this.draw();
      }
    },
  
    rotate: function () {
      const { currentBlock } = this.data;
      const newShape = this.rotateShape(currentBlock.shape);
      if (!this.checkCollision(currentBlock.x, currentBlock.y, newShape)) {
        this.setData({ 'currentBlock.shape': newShape });
        this.draw();
      }
    },
  
    checkCollision: function (x, y, shape = this.data.currentBlock.shape) {
      const { grid } = this.data;
      return shape.some((row, dy) =>
        row.some((cell, dx) => cell && (y + dy >= 20 || x + dx < 0 || x + dx >= 10 || grid[y + dy][x + dx]))
      );
    },
  
    rotateShape: function (shape) {
      return shape[0].map((_, index) => shape.map(row => row[index]).reverse());
    },
  
    fixBlock: function () {
      const { grid, currentBlock } = this.data;
      currentBlock.shape.forEach((row, dy) => {
        row.forEach((cell, dx) => {
          if (cell) {
            grid[currentBlock.y + dy][currentBlock.x + dx] = 1;
          }
        });
      });
      this.setData({ grid });
      this.clearFullRows();
    },
  
    clearFullRows: function () {
      let { grid, score } = this.data;
      grid = grid.filter(row => row.includes(0));
      const rowsCleared = 20 - grid.length;
      for (let i = 0; i < rowsCleared; i++) {
        grid.unshift(Array(10).fill(0));
      }
      this.setData({ grid, score: score + rowsCleared });
    },
  
    down: function () {
      this.moveDown(); // 加速下降
    }
  });
  